<template>
  <div  style="width: 100%;min-height:100%">
<!--    <p style="font-weight: 900;font-size: 26px;margin-left: 30px">信息录入页面</p>-->
    <div style="margin-left: 30px;display: flex">
      <div style="display: flex;flex-direction: column" class="box1">
        <img :src="img1" style="width: 100px;">
        <button class="btn1"  @click="drawer=true"><span>INSERT</span></button>
      </div>
      <div style="  display: flex;width: 100%;align-items: center;justify-content: center"><h1>智慧校园---学籍录入页面</h1></div>

      <!--  信息提示-->
      <el-tooltip
          class="box-item"
          content="学籍信息提示"
          placement="top"
      >
        <el-badge :value="updatedNum" :max="99" class="item">
          <el-icon @click="openMessage" style="width: 50px;height: 50px">
            <Message/>
          </el-icon>
        </el-badge>
      </el-tooltip>
    </div>
    <div style="margin-left: 30px;margin-top: 20px;">
    <el-input style="width: 250px" :suffix-icon="Search" v-model="stuid" placeholder="输入你想查询的学号"/>
      <el-button type="primary" style="margin-left: 10px" @click="selectStudentStuid">搜索</el-button>
      <el-button type="success" style="margin-left: 10px" @click="Refresh1">Refresh</el-button>
      <el-button type="success" style="margin-left: 10px" @click="ToEcharts">切换到数据可视化页面</el-button>
    </div>
    <div style="margin-left: 30px;margin-top: 30px">
      <el-table border :stripe="true" :show-header="true" :data="tableData" :header-cell-style="{background:'#d0d0d0',color:'#000000'}">
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="stuid" label="学号">
        </el-table-column>
        <el-table-column prop="college" label="学院">
        </el-table-column>
        <el-table-column prop="major" label="专业">
        </el-table-column>
        <el-table-column prop="grade" label="班级">
        </el-table-column>
        <el-table-column label="编辑" width="200">
          <template #default="scope">
            <el-button type="info" @click="edit(scope.row)" >修改<el-icon><Edit/></el-icon></el-button>
            <el-button type="danger" @click="deleteXueJi(scope.row.stuid)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    分页-->
    <div  style="margin-top: 20px;margin-left:30px">
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[1,2,5]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <!--信息提示弹窗-->
    <el-dialog
        v-model="dialogVisible1"
        title="提示  "
        width="30%"
        :before-close="handleClose"
    >
      <span v-if="updatedNum>0">你的学籍信息页面有{{updatedNum}}条数据更新</span>
      <span v-else>你的学籍信息页面无数据更新</span>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="queren">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
    <!--抽屉组件-->
    <el-drawer v-model="drawer"  :before-close="handleClose" title="学籍信息录入" :with-header="true" style="background-color: #d0d0d0">
      <el-form :model="form" label-width="120px">
        <el-form-item label="学号" >
          <el-input v-model="form.stuid" style="width: 250px;"/>
        </el-form-item>
        <el-form-item label="学院">
          <el-input v-model="form.college" style="width: 250px;"/>
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="form.major" style="width: 250px;"/>
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="form.grade" style="width: 250px;"/>
        </el-form-item>
      </el-form>
       <div  style="margin-top: 35px;position: relative;text-align: right">
      <el-button @click="Cancel">取 消</el-button>
      <el-button type="primary"  plain  @click="save">确 定</el-button>
    </div>
      <div style="display: flex;justify-content: center;align-items: center;margin-top: 30px;">
        <img :src="img2" style="width: 250px;height: 250px"/>
      </div>
    </el-drawer>
    <!-- 修改弹窗 -->
    <el-dialog v-model="dialogFormVisible1" title="学籍信息修改">
      <el-form v-model="form1">
        <el-form-item label="学院" :label-width="formLabelWidth">
          <el-input v-model="form1.college" autocomplete="off"   style="width: 300px;border: #545454 solid 1px;border-radius: 5px"/>
        </el-form-item>
        <el-form-item label="专业" :label-width="formLabelWidth">
          <el-input v-model="form1.major" autocomplete="off"   style="width: 300px;border: #545454 solid 1px;border-radius: 5px"/>
        </el-form-item>
        <el-form-item label="班级" :label-width="formLabelWidth">
          <el-input v-model="form1.grade" autocomplete="off"   style="width: 300px;border: #545454 solid 1px;border-radius: 5px"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
        <el-button @click="CancelForm">取消</el-button>
          <el-button @click="Confirm">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>






</template>

<script lang="ts" setup>
import {ref, reactive, computed, onMounted} from 'vue'
import {ElMessage,ElMessageBox } from 'element-plus';
import * as echarts  from 'echarts';
import {Search} from "@element-plus/icons-vue";
import img1 from "@/assets/学生管理系统/Animation - 1700796790451.gif";
import  img2 from  "@/assets/学生管理系统/Animation - 1701104702791.gif";
import {AddAcademic,selectAllList,selectBystuId,updateAcademic,delAcademic} from "../../api/Second"
const formLabelWidth ='140px'
//右侧弹框
let drawer = ref(false)
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('你确定关闭该窗口吗？')
      .then(() => {
        done()
        form.value={college: "", grade: "", major: "", stuid: ""}
      })
      .catch(() => {
        // catch error
      })
}
const form = ref({
  stuid:'', college:'', major:'', grade:''
})

// 本地存储Num数据
const  Num =ref(0 )
// 从本地存储中读取Num的值
const storedNum = localStorage.getItem('Num');
if (storedNum) {
  Num.value = parseInt(storedNum);
}
const updatedNum = computed(() => {
  return Num.value;
});
const dialogVisible1 =ref(false)
function openMessage(){
  dialogVisible1.value = !dialogVisible1.value
}
//信息提示弹窗
function queren(){
  localStorage.removeItem('Num')
  dialogVisible1.value = !dialogVisible1.value
}

//抽屉组件取消按钮
function Cancel(){
  form.value={college: "", grade: "", major: "", stuid: ""}
  drawer.value = false
}
//新增
function save(){
      let stuid =form.value.stuid
      let college =form.value.college
      let major=form.value.major
      let grade =form.value.grade
      let user ={stuid,college,major,grade}
      AddAcademic(user).then(res=>{
        console.log(res)
        // console.log(res.message)
      let errorMsg =res.data.errorMsg
      if (errorMsg==='该学号已存在，请重新添加'){
          console.log(errorMsg)
          ElMessage.error('该学号已存在，请重新添加')
      }else if (errorMsg==='学生个人信息表中未查询到该学号，请在学生表中添加学号信息'){
        console.log(errorMsg)
        ElMessage.error('学生个人信息表中未查询到该学号，请在学生表中添加学号信息')
      }else {
        ElMessage.success('添加成功')
        Num.value ++
        localStorage.setItem('Num', Num.value.toString());
        form.value={college: "", grade: "", major: "", stuid: ""}
        drawer.value = false
      }
   })
}

//修改
const form1=ref({})
const dialogFormVisible1=ref(false)
function edit(row){
  dialogFormVisible1.value = !dialogFormVisible1.value
  form1.value=row
}
function CancelForm(){
  dialogFormVisible1.value=!dialogFormVisible1.value
}//修改弹窗的确认按钮
function Confirm(){
  let form =form1.value
  updateAcademic(form).then(res=>{
    console.log(res)
    if (res.data.status){
      ElMessage({
        message: '修改成功', type: 'success', showClose: true})
      dialogFormVisible1.value=!dialogFormVisible1.value
    }else {
      ElMessage({
        message: '修改失败', type: 'error', showClose: true})
    }
  })
}

function deleteXueJi(stuid) {
  ElMessageBox.confirm(
      '你确认要删除该条信息吗？',
      '提示',
  ).then(()=>{
    delAcademic({"stuid":stuid}).then(res=>{
      console.log("res的结果是:"+res)
      if (res.data.status){
        ElMessage({
          message: '删除成功', type: 'success', showClose: true})
      }else {
        ElMessage({
          message:'删除失败',type:'error',showClose:true
        })
      }
      loadTableData()
    })
  }).catch(()=>{
    ElMessage({
      message:'已取消删除',type:'success',showClose:true
    })
  })
}

//渲染学籍数据
let tableData = ref()
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const total=ref(0)
const pageNum = ref(1)
const pageSize = ref(5)
function loadTableData(){
  selectAllList(pageNum.value,pageSize.value).then(res=>{
    console.log(res)
    let status =res.data.status
    let errorMsg =res.data.data.errorMsg
    if (status){
      tableData.value=res.data.data.list
      total.value=res.data.data.total
    }else {
      console.log(errorMsg)
    }
  })
}
//分页
const  handleCurrentChange =(res)=>{
  console.log(res)
  //我的这个pageNum是获取到的pageNum
  pageNum.value=res
  loadTableData()
}
const handleSizeChange =(res1)=>{
  console.log(res1)
  pageSize.value=res1
  loadTableData()
}
//根据学号擦查询
  const stuid =ref('')
  function selectStudentStuid(){
    selectBystuId({"stuid":stuid.value}).then(res=>{
      console.log(res)
      console.log("stuid的值是"+stuid.value)
      let status =res.data.status
      if (status===200){
        ElMessage({
          message: '查询成功',
          type: 'success',
          showClose: true
        })
        const stu3 = res.data.data;
        const array = new Array();
        array.push(stu3);
        tableData.value = array;
      }else {
        ElMessage({
          message: '未查询到数据',
          type: 'error',
          showClose: true
        })
        tableData.value =res.data.data
      }
    })
  }
//刷新页面
function Refresh1(){
  stuid.value=''
  loadTableData()
}


// 初始化函数
onMounted(() => {
  loadTableData()
  // 页面加载时，从本地存储中读取Num的值
  const storedNum = localStorage.getItem('Num');
  if (storedNum) {
    Num.value = parseInt(storedNum);
  }else {
  }
});

</script>

<style scoped>
.btn1 {
  display: inline-block;
  border: none;
  color: #ffffff;
  cursor: pointer;
  margin: 10px 10px;
  background: rgb(46, 32, 53);
  position: relative;
  width: 150px;
}

span {
  display: block;
  padding: 18px 60px
}

.btn1::before,
.btn1::after {
  content: "";
  width: 0;
  height: 2px;
  position: absolute;
  transition: all .2s linear;
  background: #fff
}

span::before,
span::after {
  content: "";
  width: 2px;
  height: 0;
  position: absolute;
  transition: all .2s linear;
  background: rgba(254, 254, 255, 0.7)
}

button:hover::before,
button:hover::after {
  width: 100%
}

button:hover span::before,
button:hover span::after {
  height: 100%
}

.btn1::before,
.btn1::after {
  transition-delay: .2s
}

.btn1 span::before,
.btn1 span::after {
  transition-delay: 0s
}

.btn1::before {
  right: 0;
  top: 0
}

.btn1::after {
  left: 0;
  bottom: 0
}

.btn1 span::before {
  left: 0;
  top: 0
}

.btn1 span::after {
  right: 0;
  bottom: 0
}

.btn1:hover::before,
.btn1:hover::after {
  transition-delay: 0s
}

.btn1:hover span::before,
.btn1:hover span::after {
  transition-delay: .2s
}

h1 {
  font-family: 隶书;
  /*box-shadow: #c9c4c4 10px 10px 10px 10px;*/
  font-size: 36px;
  /* 本例12个文字(加标点符号)；有多少个文字，width就是多少个em */
  width: 12.5em;
  /* 加上两个动画，一个是打字动画，使用steps让字一个一个的出现，
   注意step和字数保持一致，光标动画也是同理，*/
  animation: typingWords 10s steps(10) infinite, cursor 0.5s steps(1) infinite;
  /* 要设置不允许换行，且溢出隐藏 */
  white-space: nowrap;
  overflow: hidden;
  /* 使用右边框作为打印的指针光标 */
  border-right: 1px solid #000;
}

@keyframes typingWords {
  0% {
    width: 0;
  }
  50%{
    width:11.5em ;
  }
  100%{
    width:11.5em ;
  }
}

@keyframes cursor {
  50% {
    border-color: transparent;
  }
}

.box1{
  box-shadow: gray 5px 1px 10px 5px;
}

/*.item {*/
/*  margin-top: 10px;*/
/*  margin-right: 40px;*/
/*}*/
.headerBg {
  background: #eeeeee !important;
  color: rgb(0, 0, 0);
  font-size: 16px;
}
.header{
margin-left: 30px;
}


.module {
  width: 50%;
  height: 50%;
  float: left;

}
</style>